<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品信息</title>
</head>

<body>
    <h1>商品信息</h1>
    <div id="productList"></div>

    <script>
        // 使用 fetch API 发起 GET 请求获取商品信息
        fetch('http://127.0.0.1:3002/api/shop/allproducts')
            .then(response => response.json())
            .then(data => {
                const productList = document.getElementById('productList');
                data.forEach(product => {
                    const productDiv = document.createElement('div');
                    // 拼接图片的完整 URL
                    const img_url = product.img.replace("uploads/", "")
                    console.log(img_url)
                    const imageUrl = `http://127.0.0.1:3002/${img_url}`;
                    console.log(imageUrl)
                    productDiv.innerHTML = `
                <h3>${product.name}</h3>
                <p>生产商：${product.producers}</p>
                <p>价格：${product.cost}</p>
                <img src="${imageUrl}" alt="${product.name}" style="max-width: 200px;">
            `;
                    productList.appendChild(productDiv);
                });
            })
            .catch(error => console.error('Error fetching product information:', error));
    </script>
</body>

</html>